<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue3.js"></script>
     <style>
         *{margin: 0;padding: 0;}
          ul,li{list-style: none;}
          .main{
              display: flex;
              justify-content: space-between;
              width: 900px;
              margin: 20px auto;
          }
          .list-body{
              width: 100%;
              height: 500px;
              overflow-y:auto;
              box-sizing: border-box;
              border: 1px solid #ccc;
          }
          .box{
            width: 400px;height: 500px;
          }
          ul li{
              display: inline-block;
              margin: 5px;
              padding: 10px 20px;
              background-color: gold;
          }
          ul li.selected{
             background-color: goldenrod;
               color: #fff;
          }
          .del{cursor: pointer;}
        
     </style>
</head>
<body>

    <div id="app" class="main">
       <div class="box">
           <div class="panle-title">
               <h3>省份({{leftData.length}}) / 当前选中({{rightData.length}})</h3>
           </div>
           <div class="list-body">
               <ul>
                   <li @click="add(v)" :class="v.flag?'selected':''" v-for="(v,i) in leftData" :key="v.id">{{v.name}}</li>
               </ul>
           </div>
       </div>
       <div class="box">
            <div class="panle-title">
                <h3>已选中的省份({{rightData.length}})</h3>
            </div>
            <div class="list-body">
                <ul>
                    <li @mouseover="cur=i" @mouseout="cur='hide'"
                    v-for="(v,i) in rightData" :key="v.id">{{v.name}} <span v-show="cur==i" @click="delEvent(v.id)" class="del">X</span></li>
                </ul>
            </div>
        </div>
    </div>     
    <script src="./index.js"></script>   
</body>
</html>